<template>
  <div :class="'van-after-border '+item.class">
    <van-field v-model="item.value" readonly clickable :name="item.key" :placeholder="item.placeholder||'点击选择日期'" :data-rule="item.key" @click="_click">
      <template #label>
        <span class="custom-title">{{ label }}
          <van-icon v-if="help" name="question" @click="showHelp" />
        </span>
      </template>
      <template #right-icon>
        <div class="iconfont">
          &#xe67f;
        </div>
      </template>
    </van-field>
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker type="datetime" v-model="currentDate" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
import EleBase from './EleBase'
import { parseTime } from '@/utils'

export default {
  name: 'EleDateTime',
  extends: EleBase,
  props: {
    item: {
      type: Object, // 类型
      default: null // 默认值
    }
  },
  data() {
    return {
      currentDate: new Date(),
      refProp: this.$props.item,
      showPicker: false
    }
  },
  computed: {
    columns: function() {
      const columns = this.initValue
      return columns.map(function(option) {
        return option.label
      })
    }
  },
  methods: {
    _click() {
      if (this.disabled || this.readonly) {
        this.showReadonlyTip()
        return
      }
      this.showPicker = true
    },
    onConfirm(text) {
      this.showPicker = false
      this.$props.item.value = parseTime(text)
      this.$props.item.text = parseTime(text)
    },
    onCancel() {
      this.showPicker = false
    }
  }
}
</script>
